<template>
	<view class="container" :class="from">
		<view class="ch-nav" v-if="from != 'web'"></view>
		<uni-nav-bar v-else class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="180rpx" rightWidth="180rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)" @clickRight="$goByName('luckyrecords')">
			<template slot="left">
				<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
			</template>
			<text class="title">{{ isBlack ? '幸运抽奖' : '' }}</text>
			<template slot="right">
				<text class="text-primary" :class="isBlack ? 'color-black' : 'color-white'">中奖记录</text>
			</template>
		</uni-nav-bar>
		<view class="head flex-r">
			<swiper class="swiper" autoplay="true" circular="true" :interval="2000" v-if="luckyList[0]">
				<swiper-item v-for="(award, index) in luckyList" :key="index">
					<view class="swiper-item text-secondary">
						<text class="color-white">恭喜</text>
						<text class="color-yellow" space="ensp">{{' ' + award.nickname + ' '}}</text>
						<text class="color-white">获得</text>
						<text class="color-yellow" space="ensp">{{' '+award.awardResult}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="body">
			<LuckyWheel :token="token" :from="from" :width="width" :height="height"></LuckyWheel>
		</view>
		<view class="foot flex-c">
			<view class="rules-title flex-r">
				<image src="@/public/images/other/hdgz_z.png" mode="aspectFit"></image>
				<text>活动规则</text>
				<image src="@/public/images/other/hdgz_y.png" mode="aspectFit"></image>
			</view>
			<view class="rules-list flex-c">
				<view class="list-title flex-r">
					<image src="@/public/images/other/sx.png" mode="aspectFit"></image>
					<text>活动时间</text>
				</view>
				<view class="list-content">
					<text>2023-01-04 00:00:00至2024-01-04 00:00:00</text>
				</view>
			</view>
			<view class="rules-list flex-c">
				<view class="list-title flex-r">
					<image src="@/public/images/other/sx.png" mode="aspectFit"></image>
					<text>中奖说明</text>
				</view>
				<view class="list-content">
					<text>活动中奖采用随机抽奖原则，中奖概率均等。</text>
				</view>
			</view>
			<view class="rules-list flex-c">
				<view class="list-title flex-r">
					<image src="@/public/images/other/sx.png" mode="aspectFit"></image>
					<text>活动参与方式及奖品说明</text>
				</view>
				<view class="list-content">
					<text>1.活动期间用户有机会通过消费完成任务即可获取机会参与活动，具体奖品以页面实际显示为准。
					2.奖品为优惠券时，优惠券使用规则与有效期以优惠券券面显示及彩虹体育平台规则为准。用户获得的优惠券将会自动发送到账户，是否获得优惠券以到账为准，用户可在彩虹体育“我的>优惠券”中查看。优惠券的使用规则与有效期均以优惠券界面显示的彩虹体育平台规则为准。
					3.奖品为彩虹豆时，用户获得的彩虹豆预计会在24h内发放到账，用户可在“我的>充值>充值记录”中查看彩虹豆收支明细；具体使用规则遵守彩虹豆使用的相关规则。
					4.奖品为成长值时，用户获得的成长值将于领取成功后直接发放至成长值账户，用户可通过在彩虹体育“我的”中查看成长值的增长。</text>
				</view>
			</view>
			<view class="rules-list flex-c">
				<view class="list-title flex-r">
					<image src="@/public/images/other/sx.png" mode="aspectFit"></image>
					<text>其他说明</text>
				</view>
				<view class="list-content">
					<text>1.由于个人账号原因产生的问题，造成个人无法参加活动或无法领取活动奖励的，请您自行排查个人账号问题，避免产生不必要的争议与纠纷，感谢您的理解与支持。
					2.活动过程中，凡以不正当手段（作弊、恶意套现、虚假交易、扰乱系统、实时网络攻击等）参与的用户，在法律范国内有权终止其参与活动，并取消领券资格（如券已发放，有权追回)。
					3.如遇不可抗力（包含但不限于重大灾害事件、活动受政府机关指令需要停止或调整的、活动中存在大面积作弊行为、活动受严重网络攻击或因系统故障导致中奖名单大批量出错等以致活动不能正常进行的），有权取消、修改或暂停本活动。
					4.本次活动为活动方自发举办，与苹果公司及APPStore无关。
					5.本次活动的最终解释权归平台所有。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: '690rpx',
				height: '690rpx',
				
				isBlack: false,
				navBgColor: 'rgba(255,255,255,0)',
				
				luckyList: [],
				
				from: 'web',
			};
		},
		components: {
			LuckyWheel: () => import('./components/ch-lucky/ch-luckywheel.vue')
		},
		computed: {
			token() {
				return this.$store.state.userToken
			}
		},
		onLoad(e) {
			this.from = e.from || 'web'
			let token = e.token || null
			if(token){
				this.$store.commit('SET_USERTOKEN', token);
			}else if(this.from != 'web' && !this.token){
				uni.showToast({
					title: '请登录后访问',
					icon: 'error'
				})
			}
			let windowInfo = uni.getWindowInfo()
			console.log(windowInfo);
			if(windowInfo.windowWidth >= 525){
				let widthPx = 690 * (525/750) + 'px'
				console.log(widthPx);
				this.width = widthPx
				this.height = widthPx
			}
			if(this.token){
				this.getLuckyShow()
			}
		},
		onPageScroll(e) {
			if(this.from != 'web'){
				return false
			}
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		methods: {
			//中奖展示
			getLuckyShow() {
				this.$http.get({
					url: '/api/lucky/luckyShow'
				}).then((data) => {
					console.log(data);
					if(data.success && data.result){
						this.luckyList = data.result
						this.$forceUpdate()
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$web: -88rpx;
	.container{
		background-color: #3B0099;
		background-image: url("~@/public/images/other/bg-ys.jpg");
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100%;
		&.web{
			background-position: 0 $web;
			.head{
				margin: 332rpx auto 0;
			}
		}
	}
	.ch-nav{
		height: 96rpx;
		.text-primary{
			margin-right: 20rpx;
		}
	}
	.head{
		margin: 412rpx auto 0;
		width: 640rpx;
		height: 72rpx;
		.swiper{
			width: 640rpx;
			height: 72rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 36rpx;
			align-items: center;
			justify-content: center;
			.color-yellow{
				color: #FFFF00;
			}
			.swiper-item{
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
			}
		}
	}
	.body{
		margin: 0 auto;
		height: 998rpx;
	}
	.foot{
		margin-top: 50rpx;
		color: #DBB2FF;
		padding-bottom: calc(30rpx + var(--safe-area-inset-bottom));
		.rules-title{
			align-items: center;
			justify-content: center;
			image{
				width: 88rpx;
				height: 40rpx;
			}
			text{
				margin: 0 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFEEA8;
				line-height: 48rpx;
			}
		}
		.rules-list{
			margin: 30rpx 20rpx 0;
			.list-title{
				align-items: center;
				image{
					width: 6rpx;
					height: 30rpx;
				}
				text{
					margin: 0 20rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFEEA8;
					line-height: 48rpx;
				}
			}
			.list-content{
				text-align: justify;
				font-size: 26rpx;
				line-height: 48rpx;
			}
		}
	}
</style>
